import { TypedUseSelectorHook, useDispatch as useReduxDispatch, useSelector as useReduxSelector } from "react-redux";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import userSlice from "./modules/userSlice";
import menuSlice from "./modules/menuSlice";
import tabsSlice from "./modules/tabsSlice";
import themeSlice from "./modules/themeSlice";

// redux persist 持久化存储
const persistConfig = {
	key: "redux-state",
	storage: storage
};

const sliceReducer = combineReducers({
	user: userSlice,
	menu: menuSlice,
	tabs: tabsSlice,
	theme: themeSlice
});

const persistedReducer = persistReducer(persistConfig, sliceReducer);

export const store = configureStore({
	reducer: persistedReducer,
	middleware: getDefaultMiddleware =>
		getDefaultMiddleware({
			//关闭redux序列化检测
			serializableCheck: false
		})
});

// 创建持久存储
export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;
export const useDispatch = () => useReduxDispatch<AppDispatch>();
